<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>小型婚礼</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">

	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="data.json"></script>

</head>
<body>
	

	<table id="list">
		<tr>
			<th>序号</th>
			<th>消息</th>
			<th>操作</th>
		</tr>
	</table>

	<ul id="list">
		
	</ul>

	<button id="save">保存</button>

	<script type="text/javascript">


	$(function(){

		for (var i = 0; i < words.length; i++) {
			//$("#list").append('<li>'+words[i]+'<button type="button" data-index="'+i+'">删除</button></li>');
			var tpl = "";
			tpl += "<tr>";
			tpl += "<td>"+i+"</td>";
			tpl += "<td>"+words[i]+"</td>";
			tpl += '<td><button type="button" data-index="'+i+'">删除</button></td>';
			tpl += "</tr>";
			$("#list").append(tpl);
		};

		$("#list").delegate('button', 'click', function(event) {
			//console.log($(this).attr("data-index"));
			words.splice($(this).attr("data-index"),1);
			//console.log(words);
			$(this).parent().parent().remove();
		});

		$("#save").click(function(event) {
			/* Act on the event */
			$.post("write.php",{"words":words}).done(function(){
				alert("操作成功！");
				location.href = "index.html";
			});
		});

		//$("#list ")


		//$("#list")
	});
	</script>
</body>
</html>